<script setup lang='ts'>
import { reactive, ref, watch } from 'vue';
type IPerson = { name: string, info: { address: string, phone: string } }

const count = ref(0)
const name = ref('123')
const person = reactive<IPerson>({
    name: '张三',
    info: {
        address: '北京市朝阳区',
        phone: '010-123456'
    }
})
//侦听器单个的用法
// watch(count, (newValue, oldValue) => {
//     console.log('新值：', newValue, '旧值', oldValue);
// })
//侦听器监听多个的响应式数据
// watch([count, name], (newValue, oldValue) => {
//     console.log('新值：' + newValue, '旧值' + oldValue);
// })
// Watch监听响应式对象中一个属性(简单)
watch(() => person.name, (newValue, oldValue) => {
    console.log('新值：' + newValue, '旧值' + oldValue);
})
// watch监听响应式对象数据中的一个属性(复杂)，配置深度监听
// watch(person, (newValue, oldValue) => {
//     console.log('新值：' + newValue, '旧值' + oldValue);
// }, {
//     deep: true,//开启深度监听
//     immediate: true  // 默认执行一次
// })
// watch监听响应式对象数据中的一个属性(复杂)，默认执行一次
watch(person, (newValue, oldValue) => {
    console.log('新值：' + newValue, '旧值' + oldValue);
}, {
    immediate: true  // 默认执行一次
})
</script>

<template>
    <h1>Watch最简单用法</h1>
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
    <input type="text" v-model="name">
    <h1>Watch监听对象中属性的变化</h1>
    <ul>
        <li v-for="(value, key, index) in person" :key="index">
            {{ value }}
        </li>
        <button @click="person.name = '李四'">修改名字</button>
        <button @click="person.info = { address: '北京市海淀区', phone: '1111111' }">修改信息</button>
    </ul>

</template>

<style scoped></style>